<script lang="ts" setup>
import type { Key } from 'ant-design-vue/es/vc-tree/interface';

import type { ExtendedModalApi } from '@vben/common-ui';

import type { TreeItem } from '#/components/tree';

import { onMounted, reactive, ref } from 'vue';

import { ColPage } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { useFs } from '@fast-crud/fast-crud';
import { Button, Tooltip } from 'ant-design-vue';

import { BaseEmployeeConfig } from '#/api/basic/user/baseEmployee';
import { getValidateRulesByFs } from '#/api/common/validateByFs';
import { ActionEnum } from '#/enums/commonEnum';
import BindRole from '#/views/_core/common/bindRole/index.vue';

import BaseOrgTree from '../baseOrg/modules/tree.vue';
import { createCrudOptions, frontRules } from './data/crud';
import InvitationUserModal from './modules/invitation-user.vue';
import ResetPassword from './modules/reset-password.vue';

defineOptions({
  name: '员工管理',
  inheritAttrs: false,
});

const orgIdList = ref<Key[]>();
const bindRoleRef = ref<ExtendedModalApi>();
const invitationUserRef = ref<ExtendedModalApi>();
const resetPasswordRef = ref<ExtendedModalApi>();

const { crudRef, crudBinding, crudExpose, appendCrudOptions } = useFs({
  createCrudOptions,
  context: { orgIdList, bindRoleRef, invitationUserRef, resetPasswordRef },
});

const colPageProps = reactive({
  leftCollapsedWidth: 3,
  // 左侧最大宽度百分比
  leftMaxWidth: 50,
  // 左侧最小宽度百分比
  leftMinWidth: 10,
  // 左侧默认宽度
  leftWidth: 20,
  // 右侧默认宽度
  rightWidth: 80,
  // 左侧可折叠
  leftCollapsible: true,
  // 显示拖动手柄
  splitHandle: true,
  // 可拖动调整宽度
  resizable: true,
  // 显示拖动分隔线
  splitLine: true,
});

// 页面打开后获取列表数据
onMounted(async () => {
  const addFormOptions = await getValidateRulesByFs({
    Api: BaseEmployeeConfig.Save,
    mode: ActionEnum.ADD,
    customRules: frontRules(crudExpose, ActionEnum.ADD),
    trigger: ['blur', 'change'],
  });
  const editFormOptions = await getValidateRulesByFs({
    Api: BaseEmployeeConfig.Update,
    mode: ActionEnum.EDIT,
    customRules: frontRules(crudExpose, ActionEnum.EDIT),
    trigger: ['blur', 'change'],
  });
  appendCrudOptions({ ...addFormOptions, ...editFormOptions });
  crudExpose.doRefresh();
});

function handleReset() {
  crudExpose.doSearch({ form: {} });
}

function handleOrgSelect(
  _: TreeItem,
  _node: TreeItem,
  childrenIds: Key[] = [],
) {
  orgIdList.value = childrenIds;
  crudExpose.doRefresh();
}
</script>

<template>
  <ColPage auto-content-height v-bind="colPageProps">
    <template #left="{ isCollapsed, expand }">
      <div v-if="isCollapsed" @click="expand">
        <Tooltip title="点击展开左侧">
          <Button shape="circle" type="primary">
            <template #icon>
              <IconifyIcon class="text-2xl" icon="bi:arrow-right" />
            </template>
          </Button>
        </Tooltip>
      </div>
      <div
        v-else
        class="border-border bg-card mr-2 h-full rounded-[var(--radius)] border p-2"
      >
        <BaseOrgTree query @reset="handleReset" @select="handleOrgSelect" />
      </div>
    </template>
    <FsCrud ref="crudRef" v-bind="crudBinding" />
    <ResetPassword ref="resetPasswordRef" @success="crudExpose.doRefresh()" />
    <BindRole ref="bindRoleRef" @success="crudExpose.doRefresh()" />
    <InvitationUserModal
      ref="invitationUserRef"
      @success="crudExpose.doRefresh()"
    />
  </ColPage>
</template>
<style lang="scss" scoped>
:deep(.fs-layout-card) {
  .box {
    .inner {
      .header {
        margin-top: 0;
      }
    }
  }
}
</style>
